<template>
  <div class="w-1/3 mx-auto mt-40 shadow-2xl shadow-blue-300 rounded-box">
    <div class="w-3/4 mx-auto pt-4">
      <label class="input input-bordered flex items-center gap-2 my-4">
        Name
        <input type="text" class="grow" v-model="name" />
      </label>

      <label class="input input-bordered flex items-center gap-2 my-4">
        Student ID
        <input type="text" class="grow" v-model="studentId" />
      </label>

      <label class="input input-bordered flex items-center gap-2 my-4">
        Class
        <input type="text" class="grow" v-model="classInfo" />
      </label>

      <label class="input input-bordered flex items-center gap-2 my-4">
        Score
        <input type="number" class="grow" v-model="score" min="0" max="100" />
      </label>

      <select class="select select-bordered w-full mb-4" v-model="subject">
        <option disabled selected>Choose Subject</option>
        <option>Mathematics</option>
        <option>English</option>
        <option>History</option>
        <option>Geography</option>
        <option>Science</option>
        <option>Chemistry</option>
        <option>Physics</option>
        <option>Biology</option>
      </select>

      <div class="grid grid-cols-2 gap-4">
        <select class="select select-bordered w-full" v-model="semesterYear">
          <option disabled>Choose Subject</option>
          <option v-for="year in yearList" :key="year">{{ year }}</option>
        </select>
        <select class="select select-bordered w-full" v-model="semesterSeason">
          <option disabled>Choose Subject</option>
          <option>Spring</option>
          <option>Fall</option>
        </select>
      </div>
    </div>

    <div class="text-center">
      <button class="btn btn-primary my-2">Update Score</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('Alex');
const studentId = ref('123');
const classInfo = ref('Class 1 | Year 8');

const score = ref(0);
const subject = ref('Mathematics');

const semesterSeason = ref('Spring');
const semesterYear = ref(new Date().getFullYear());

const yearList = Array.from(
  { length: new Date().getFullYear() - 2000 + 1 },
  (_, index) => index + 2000
);
</script>
